﻿@{
    ViewData["Title"] = "RoleView";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<form class="layui-form layui-row layui-col-space16">

    <div class="layui-col-md4">
        <div style=" display:flex">
            <label style="width:100px" class="layui-form-label">部门名称</label>

            <input type="text" name="name" id="name" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>

</form>

<table class="layui-hide" id="ID-table-demo-data"></table>
@* //操作列 *@
<script type="text/html" id="barDemo">
    <div class="layui-clear-space" >
       <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs" lay-event="more">
      更多
      <i class="layui-icon layui-icon-down"></i>
    </a>
    </div>
</script>
<script type="text/html" id="toolbarDemo">
    <div style="display:flex">
         <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="getCheckData">批量删除</button>
    <button class="layui-btn layui-btn-sm" lay-event="getData">获取当前页数据</button>
        </div>
    </div>
</script>
@* //分页 *@
<div id="demo-laypage-all"></div>
@* 弹窗 *@
<div id="RoleEdit" style="display:none">
    <form class="layui-form">
        <div class="layui-form-item" style="display:none">
            <label class="layui-form-label">部门id</label>
            <div class="layui-input-block">
                <input type="text" name="roleId" id="roleId" placeholder="请输入" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">部门名称</label>
            <div class="layui-input-block">
                <input type="text" name="roleName" id="roleName" placeholder="请输入" lay-verify="required" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">部门备注</label>
            <div class="layui-input-block">
                <input type="text" name="remark" id="remark" placeholder="请输入" lay-verify="required" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">门店名称</label>
            <div class="layui-input-block">
                <input type="text" name="storeName" id="storeName" placeholder="请输入" lay-verify="required" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="reset" class="layui-btn layui-btn-primary">取消</button>
                <button class="layui-btn" lay-submit lay-filter="xiunumber">修改</button>
            </div>
        </div>
    </form>
</div>
<script>
    layui.use(['table', 'jquery', 'layer'], function () {
        var table = layui.table;
        var dropdown = layui.dropdown;
        var layer = layui.layer;
        var $ = layui.jquery;
        var laypage = layui.laypage;
        var form = layui.form;
        //总条数
        var total = 0;
        //条件
        var page = {
            index: 1,
            size: 3,
            name: ""
        }


      
        //显示
        function show() {
            $.ajax({
                url: "http://localhost:5174/api/Roles/GetRoles",
                type: "post",
                contentType: "application/json",
                data: JSON.stringify(page),
                async: false,
                headers: {
                    "Authorization": "Bearer " + localStorage.getItem('token')
                },
                success: res => {
                    total = res.data.total;
                    console.log(total)
                    // 已知数据渲染
                    var inst = table.render({
                        elem: '#ID-table-demo-data',
                        toolbar: '#toolbarDemo',
                        data: res.data.data,
                        limit: page.size,
                        cols: [[ //标题栏
                            { type: 'checkbox', fixed: 'left' },
                            { field: 'roleId', title: 'ID', width: 80, sort: true },
                            { field: 'roleName', title: '部门名称', width: 120 },
                            { field: 'remark', title: '部门备注', width: 120 },
                            { field: 'storeName', title: '门店名称', width: 120 },
                            { field: 'createdTime', title: '创建时间', width: 180 },
                            { toolbar: "#barDemo", title: "操作" }
                        ]],
                    });
                }
            })

        }
        //立即调用
        show();
        //渲染分页
        laypage.render({
            elem: 'demo-laypage-all', // 元素 id
            count: total, // 数据总数
            limit: page.size,
            layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'], // 功能布局
            limits: [3, 4, 5, 6],
            prev: '<em>←</em>',
            next: '<em>→</em>',
            //页面跳转时
            jump: function (obj, first) {

                //非首次加载时调用
                if (!first) {
                    page.index = obj.curr;
                    page.size = obj.limit;
                    show()
                }
            }
        });
        //文本框失去焦点事件
        $('#name').on('blur', function () {
            page.name = $("[name=name]").val();
            // 在这里调用查询函数
            show();
        });
        // checkIds复选框选中ID
        var checkIds = [];
        // 触发表格复选框选择
        table.on('checkbox()', function (obj) {

            var checked = obj.checked; // 复选框是否选中
            var data = obj.data; // 当前行的数据，注意：在all类型事件中，此属性不可用
            var type = obj.type; // 触发类型，'one' 表示单行选中，'all' 表示全选

            if (type === 'one') {
                // 单行选中或取消选中
                if (checked) {
                    // 如果复选框被选中，则添加ID到数组
                    checkIds.push(data.roleId); // 假设你的ID字段名为id
                } else {
                    // 如果复选框被取消选中，则从数组中移除ID
                    var index = checkIds.indexOf(data.roleId);
                    if (index > -1) {
                        checkIds.splice(index, 1);
                    }
                }

            }
            else if (type === 'all') {


                // 全选或全不选
                if (checked) {
                    // 重置checkedIds数组并填充所有选中行的ID
                    checkIds = [];

                    obj.config.data.forEach(function (row) {
                        checkIds.push(row.roleId); // 假设你的ID字段名为id
                    });
                } else {
                    // 如果全不选，则清空checkedIds数组
                    checkIds = [];
                }
            }

            // 可以在这里打印或处理checkedIds数组
            console.log(checkIds);
        });
        // 触发单元格工具事件修改，删除
        table.on('tool(ID-table-demo-data)', function (obj) { // 双击 toolDouble

            // console.log(obj)
            var data = obj.data; // 获得当前行数据
            var layEvent = obj.event;
            // console.log(obj)
            if (obj.event === 'edit') {
                console.log(data.roleId)
                document.getElementById('roleId').value = data.roleId;
                document.getElementById('roleName').value = data.roleName;
                document.getElementById('remark').value = data.remark;
                document.getElementById('storeName').value = data.storeName;

                layer.open({
                    title: '修改部门',
                    type: 1,
                    shade: false, // 不显示遮罩
                    area: ['60%', '70%'],
                    content: $('#RoleEdit'),
                    end: function () {
                        // layer.msg('关闭后的回调', {icon:6});
                    }

                });
            }
            else if (obj.event === 'more') {

                // 更多 - 下拉菜单
                dropdown.render({
                    elem: this, // 触发事件的 DOM 对象
                    show: true, // 外部事件触发即显示
                    data: [{
                        title: '查看',
                        id: 'detail'
                    }, {
                        title: '删除',
                        id: 'del'
                    }],
                    click: function (menudata) {
                        if (menudata.id === 'detail') {
                            layer.msg('查看操作，当前行 ID:' + data.roleId);
                        } else if (menudata.id === 'del') {
                            layer.confirm('真的删除行 [ids: ' + data.roleId + '] 么', function (index) {
                                // obj.del(); // 删除对应行（tr）的DOM结构
                                $.ajax({
                                    url: "http://localhost:5174/api/Roles/Deletes",
                                    type: "post",
                                    contentType: "application/json",
                                    data: JSON.stringify({ ids: [data.roleId] }),
                                    async: false,
                                    headers: {
                                        "Authorization": "Bearer " + localStorage.getItem('token')
                                    },
                                    success: res => {
                                        if (res.code > 0) {
                                            layer.msg(res.msg)
                                            show();
                                        }
                                        else {
                                            layer.msg(res.msg)
                                        }
                                    },
                                    error: function (error) {
                                        console.log(error);
                                    }
                                });
                                layer.close(index);
                                // 向服务端发送删除指令
                            });
                        }
                    },
                    align: 'right', // 右对齐弹出
                    style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' // 设置额外样式
                })
            }

        });
        // 工具栏事件批量删除
        table.on('toolbar(ID-table-demo-data)', function (obj) {
            var id = obj.config.data;

            var othis = lay(this);
            switch (obj.event) {
                case 'getCheckData':
                    $.ajax({
                        url: "http://localhost:5174/api/Roles/Deletes",
                        type: "post",
                        contentType: "application/json",
                        data: JSON.stringify({ ids: checkIds }),
                        async: false,
                        headers: {
                            "Authorization": "Bearer " + localStorage.getItem('token')
                        },
                        success: res => {
                            if (res.code > 0) {
                                layer.msg(res.msg)
                                show();
                            }
                            else {
                                layer.msg(res.msg)
                            }
                        },
                        error: function (error) {
                            console.log(error);
                        }
                    });
                    break;
                case 'getData':
                    var getData = table.getData(id);
                    console.log(getData);
                    layer.alert(layui.util.escape(JSON.stringify(getData)));
                    break;
            };
        });
        //修改部门
        form.on('submit(xiunumber)', function (data) {
            $.ajax({
                url: 'http://localhost:5174/api/Roles/Updates',
                type: 'post',
                contentType: "application/json",
                data: JSON.stringify(data.field),
                success: function (res) {
                    // 添加成功后的操作
                    if (res.code > 0) {
                        layer.msg("修改成功");

                    }
                }
            });
            return false;
        });
    });



</script>
